<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>折叠式菜单特效</title>
  <link rel="stylesheet" href="css/menu.css">
  <script src="js/jquery-1.12.4.js"></script>
</head>

<body>
  <ul class="menu_list">
    <li>
      <p class="menu_head">目标管理</p>
      <div class="menu_body">
        <a href="#">主题空间</a>
        <a href="#">项目任务</a>
        <a href="#">工作计划</a>
        <a href="#">日程事件</a>
        <a href="#">时间视图</a>
      </div>
    </li>
    <li>
      <p class="menu_head">会议管理</p>
      <div class="menu_body">
        <a href="#">主题空间</a>
        <a href="#">会议安排</a>
        <a href="#">待开会议</a>
        <a href="#">已开会议</a>
        <a href="#">会议资源</a>
      </div>
    </li>
    <li>
      <p class="menu_head">知识社区</p>
      <div class="menu_body">
        <a href="#">我的收藏</a>
        <a href="#">知识广场</a>
        <a href="#">文档中心</a>
        <a href="#">我的博客</a>
        <a href="#">文档库管理</a>
      </div>
    </li>
    <li>
      <p class="menu_head">我的工具</p>
      <div class="menu_body">
        <a href="#">综合查询</a>
        <a href="#">通讯录</a>
        <a href="#">便签</a>
        <a href="#">计算器</a>
        <a href="#">万年历</a>
        <a href="#">常用链接</a>
      </div>
    </li>
  </ul>

</body>
<script>
  //1.所有子菜单隐藏
  //2.点击一级菜单，显示对应的子菜单（其他子菜单隐藏）获取当前被点击的元素用$(this)来获取
  //3.修改一级菜单的图标，展开为-，隐藏为+(css方法去修改backgroundImage)
  $(function () {
    var menuSave = ''
    $('.menu_body').hide()
    $('.menu_head').click(function () {
      if (menuSave == $(this).context) {
        $(this).removeClass("menu_list current");
        $(this).next().hide()
        menuSave = ''
        return
      } else {
        $('.menu_head').removeClass("menu_list current");
        $('.menu_body').hide()
        $(this).addClass("menu_list current");
        $(this).next().show()
      }
      menuSave = $(this).context
    })
  })
</script>

</html>